<script setup lang='ts'>
import { ref, onMounted,  watchEffect } from 'vue'
import { useHistoryStore } from '../../stores/history';
import { useUserStore } from '../../stores/user';
import { useRoute } from 'vue-router';
import { getBookcaseAPI,delBookcaseAPI } from '../../apis/bookcase';

const route = useRoute()
const historyStore = useHistoryStore()
const userStore = useUserStore()

const bookcase = ref([])

const getBookCase = async () => {
  const res = await getBookcaseAPI()
  bookcase.value = res.data
}

const removeBookcase = async (id,index) => {
  const res = await delBookcaseAPI(id)
  bookcase.value.splice(index,1)
}

watchEffect(() => {
  if (route.path === '/user/bookcase') {
    // 请求 用户书架
    getBookCase()
  document.title = '笔趣阁_我的书架'
  } else {
    document.title = '笔趣阁_浏览记录'
  }
})

onMounted(() => {
  if (route.path === '/user/bookcase') {
    // 请求 用户书架
    getBookCase()
  } 
})
</script>

<template>

  <div class="">
  
    <div
      v-if="userStore.token != '' && route.path == '/user/bookcase'"
      class="w-full mt-2 border-2 border-blue-300"
    >
      <!-- 登录下的书架 -->
      <h1 class="py-2 text-sm bg-gray-200 border-b bg-opacity-80">
        <span class="pl-2">
          {{ route.meta.tip }} </span>
      </h1>
      <div
        v-if="bookcase != []"
        class="grid grid-cols-2 gap-1 px-3 py-3"
      >
        <div
          v-for="(item, index) in bookcase"
          :key="item.id"
          class="flex items-start justify-between px-2 py-2 border border-gray-200 rounded-md bg-orange-50"
        >
          <div class="flex">
            <div class="w-6 h-6 mr-2 font-bold text-center text-white bg-orange-600 rounded-md">{{ index + 1 }}</div>
            <div class="flex flex-col items-start space-y-0.5 text-sm text-gray-500">
              <RouterLink :to="{ path: '/book/' + item.novelId }">
                <span class="hover:text-red-500"> {{ item.name }}</span>
              </RouterLink>
              <div>作者: {{ item.author }}</div>
              <RouterLink :to="{ path: '/book/' + item.novelId + '/' + item.newId }">
                <div class="hover:text-red-500">最新章节: {{ item.newChapter }}</div>
              </RouterLink>
              <div>更新时间: {{ item.updateTime.replace('T',' ') }}</div>
              <RouterLink :to="{ path: '/book/' + item.novelId + '/' + item.readId }">
                <span class="hover:text-red-500">已读到: {{ item.readName }}</span>
              </RouterLink>
            </div>
          </div>
          <el-button
            type="danger"
            @click="removeBookcase(item.id,index)"
          >删除</el-button>
        </div>
      </div>
      <div
        v-else
        class="w-full py-10 mx-auto "
      >
        <div class="flex items-center justify-center text-gray-700">
          书架中还木有任何书籍( ˙﹏˙ )
        </div>
      </div>
    </div>
    <div
      v-else
      class="w-full mt-2 border-2 border-blue-300"
    >
    <!-- 未登录下的游览记录 -->
      <h1 class="py-2 text-sm bg-gray-200 border-b bg-opacity-80">
        <span class="pl-2">
          {{ route.meta.tip }} </span>
      </h1>
      <div>
      </div>
      <div
        v-if="historyStore.history != ''"
        class="grid grid-cols-2 gap-1 px-3 py-3"
      >
        <div
          v-for="(item, index) in historyStore.history"
          :key="item.id"
          class="flex items-start justify-between px-2 py-2 border border-gray-200 rounded-md bg-orange-50"
        >
          <div class="flex">
            <div class="w-6 h-6 mr-2 font-bold text-center text-white bg-orange-600 rounded-md "><span class="text-sm">{{ index + 1 }}</span></div>
            <div class="flex flex-col items-start space-y-0.5 text-sm text-gray-500">
              <RouterLink :to="{ path: '/book/' + item.novelId }">
                <span class="hover:text-red-500"> {{ item.name }}</span>
              </RouterLink>
              <div>分类: {{ item.type?.substring(0,2) }}</div>
              <div>作者: {{ item.author }}</div>
              <RouterLink :to="{ path: '/book/' + item.id + '/' + item.id }">
                <span class="hover:text-red-500">已读到: {{ item.chapter }}</span>
              </RouterLink>
              <div></div>
            </div>
          </div>
          <el-button
            type="danger"
            @click="useHistoryStore().remove(item.novelId)"
          >删除</el-button>
        </div>
      </div>
      <div
        v-else
        class="w-full py-10 mx-auto "
      >
        <div class="flex items-center justify-center text-gray-700">
          还木有任何书籍( ˙﹏˙ )
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped lang='scss'></style>